<template>
  <div class="register_body">
    <div>
      <input class="register_text" v-model="username" type="text" placeHolder="账户名" >
    </div>
    <div class="register_email">
      <input class="register_text" v-model="email" type="email" placeHolder="邮箱" >
      <button @touchstart="handleToVerify" :disabled="disabled">{{verifyInfo}}</button>
    </div>
    <div>
      <input class="register_text" v-model="verify" type="text" placeHolder="验证码" >
    </div>
    <div>
      <select class="register_text" v-model="isAdmin">
        <option value="0">普通会员</option>
        <option value="1">管理员</option>
      </select>    
    </div>
    <div>
      <input class="register_text" v-model="password" type="password" placeHolder="请输入您的密码" >
    </div>
    <div>
      <input class="register_text" v-model="rePassword" type="password" placeHolder="请再次输入您的密码" >
    </div>
    <div class="register_btn">
      <input type="submit" value="注册" @touchstart="handleToRegister">
    </div>
    <div class="register_link">
      <router-link to="/mine/login">立即登录</router-link>
      <router-link to="/mine/findPassword">找回密码</router-link>
    </div>
  </div>
</template>

<script>
import {messageBox} from '@/components/js/index'
import { setInterval } from 'timers';
export default {
  data() {
    return {
      username: '',
      email: '',
      verify: '',
      isAdmin: 0,
      password: '',
      rePassword: '',
      verifyInfo: '发送验证码',
      disabled: false
    }
  },
  methods: {
    countDown() {
      this.disabled = true
      let count = 60
      let timer = setInterval(() => {
        count--
        this.verifyInfo = `还剩${count}秒`
        if(count === 0) {
          this.disabled = false
          this.verifyInfo = '发送验证码'
          clearInterval(timer._id)
          return
        }
      }, 1000)
    },
    async handleToVerify() {
      if(this.disabled) return 
      if(this.email) {
        let res = await this.$axios.get(`/api2/users/verify?email=${this.email}`)
        let that = this
        if(res && res.data.status === 0) {
          messageBox({
            title: '验证码',
            content: res.data.msg,
            ok: '确定',
            handleOk() {
              that.countDown()
            }
          })
        }else{
          messageBox({
            title: '验证码',
            content: res.data.msg,
            ok: '确定'
          })
        }
      }
    },
    async handleToRegister() {
      if(!this.username || !this.email || !this.verify || !this.password ||!this.rePassword) {
        messageBox({
          title: '提示',
          content: '请填写完整信息',
          ok: '确定'
        })
        return
      }
      let res = await this.$axios.post('/api2/users/register', {
        username:this.username,
        email: this.email,
        verify: this.verify,
        isAdmin: this.isAdmin,
        password: this.password
      })
      let that = this
      if(res.data.status === 0) {
        messageBox({
          title: '注册',
          content: res.data.msg,
          ok: '确定',
          handleOk() {
            that.$router.push('/mine/login')
          }
        })
      }else {
        messageBox({
          title: '注册',
          content: res.data.msg + ',请重新注册',
          ok: '确定'
        })
      }
    }
  }
}
</script>

<style scoped>
#content .register_body{  width:100%;}
.register_body .register_email{  display: flex; align-items: center}
.register_body .register_email .register_text { flex: 1 }
.register_body .register_email button { width: 25%; height:40px; margin-bottom:5px; outline: none;}
.register_body .register_text{ width:100%; height: 40px; border:none; border-bottom: 1px #ccc solid; margin-bottom: 5px; outline: none; text-indent: 10px;}
.register_body .register_btn{ height:50px; margin:10px;}
.register_body .register_btn input{ width:100%; height:100%; background:#e54847; border-radius: 3px; border:none; display: block; color:white; font-size: 20px;}
.register_body .register_link{ display: flex; justify-content:space-between;}
.register_body .register_link a{ text-decoration: none; margin:0 5px; font-size: 12px; color:#e54847;}
</style>
